<ng-container *ngIf="project$ | async as project">
  <mat-card class="custom-card front">
    <mat-card-header>
      <div mat-card-avatar class="example-header-image"></div>
      <mat-card-title>{{ (project$ | async)?.title }}</mat-card-title>
      <mat-card-subtitle>Dog Breed</mat-card-subtitle>
    </mat-card-header>
    <img mat-card-image [src]="project.thumbnail" alt="Photo of a Shiba Inu">
    <mat-card-content>
      <p>
        The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
        A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
        bred for hunting.
      </p>
    </mat-card-content>
    <mat-card-actions>
      <button class="active" mat-button>READ MORE</button>
      <button class="active" mat-button>{{ project.id }}</button>
    </mat-card-actions>
  </mat-card>
</ng-container>

